<template>
  <div class="order-list-container">
    <div class="header">
      <h2>我的订单</h2>
      <div class="filter-form">
        <el-form :inline="true" :model="filterForm">
          <el-form-item label="订单状态">
            <el-select v-model="filterForm.status" placeholder="选择状态">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="filterForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleFilter">查询</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="进行中" name="ongoing">
        <el-table :data="currentOrders" stripe style="width: 100%">
          <el-table-column prop="orderNo" label="订单编号" width="120" />
          <el-table-column prop="patientName" label="患者姓名" width="120" />
          <el-table-column prop="serviceType" label="服务类型" width="120" />
          <el-table-column prop="serviceTime" label="服务时间" width="180" />
          <el-table-column prop="location" label="服务地点" />
          <el-table-column prop="price" label="服务费用" width="120">
            <template #default="scope">
              ¥{{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="scope">
              <el-button 
                type="primary" 
                size="small" 
                @click="handleDetail(scope.row)"
              >
                详情
              </el-button>
              <el-button 
                v-if="scope.row.status === 'ongoing'"
                type="success" 
                size="small" 
                @click="handleComplete(scope.row)"
              >
                完成服务
              </el-button>
              <el-button 
                v-if="scope.row.status === 'ongoing'"
                type="danger" 
                size="small" 
                @click="handleCancel(scope.row)"
              >
                取消订单
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>

      <el-tab-pane label="已完成" name="completed">
        <!-- 使用相同的表格组件，但数据源不同 -->
      </el-tab-pane>

      <el-tab-pane label="已取消" name="cancelled">
        <!-- 使用相同的表格组件，但数据源不同 -->
      </el-tab-pane>
    </el-tabs>

    <!-- 订单详情对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="订单详情"
      width="600px"
    >
      <div v-if="currentOrder" class="order-detail">
        <div class="detail-section">
          <h3>基本信息</h3>
          <div class="detail-row">
            <span class="label">订单编号：</span>
            <span>{{ currentOrder.orderNo }}</span>
          </div>
          <div class="detail-row">
            <span class="label">创建时间：</span>
            <span>{{ currentOrder.createTime }}</span>
          </div>
          <div class="detail-row">
            <span class="label">订单状态：</span>
            <el-tag :type="getStatusType(currentOrder.status)">
              {{ getStatusText(currentOrder.status) }}
            </el-tag>
          </div>
        </div>

        <div class="detail-section">
          <h3>患者信息</h3>
          <div class="detail-row">
            <span class="label">姓名：</span>
            <span>{{ currentOrder.patientName }}</span>
          </div>
          <div class="detail-row">
            <span class="label">年龄：</span>
            <span>{{ currentOrder.patientAge }}岁</span>
          </div>
          <div class="detail-row">
            <span class="label">联系电话：</span>
            <span>{{ currentOrder.patientPhone }}</span>
          </div>
        </div>

        <div class="detail-section">
          <h3>服务信息</h3>
          <div class="detail-row">
            <span class="label">服务类型：</span>
            <span>{{ currentOrder.serviceType }}</span>
          </div>
          <div class="detail-row">
            <span class="label">服务时间：</span>
            <span>{{ currentOrder.serviceTime }}</span>
          </div>
          <div class="detail-row">
            <span class="label">服务地点：</span>
            <span>{{ currentOrder.location }}</span>
          </div>
          <div class="detail-row">
            <span class="label">服务费用：</span>
            <span class="price">¥{{ currentOrder.price }}</span>
          </div>
        </div>

        <div class="detail-section">
          <h3>备注信息</h3>
          <p>{{ currentOrder.remark || '无' }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 状态选项
const statusOptions = [
  { label: '全部', value: '' },
  { label: '进行中', value: 'ongoing' },
  { label: '已完成', value: 'completed' },
  { label: '已取消', value: 'cancelled' }
]

// 筛选表单
const filterForm = reactive({
  status: '',
  dateRange: []
})

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 标签页相关
const activeTab = ref('ongoing')

// 对话框控制
const dialogVisible = ref(false)
const currentOrder = ref(null)

// 模拟订单数据
const currentOrders = ref([
  {
    orderNo: 'DD20240101001',
    patientName: '张三',
    serviceType: '普通陪诊',
    serviceTime: '2024-01-01 09:00-12:00',
    location: '协和医院',
    price: 200,
    status: 'ongoing',
    createTime: '2024-01-01 08:00',
    patientAge: 65,
    patientPhone: '13800138000',
    remark: '需要轮椅服务'
  },
  // ... 更多订单数据
])

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    ongoing: 'primary',
    completed: 'success',
    cancelled: 'info'
  }
  return typeMap[status]
}

// 获取状态文本
const getStatusText = (status) => {
  const textMap = {
    ongoing: '进行中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return textMap[status]
}

// 处理筛选
const handleFilter = () => {
  // TODO: 实现筛选逻辑
  console.log('筛选条件：', filterForm)
}

// 重置筛选
const resetFilter = () => {
  filterForm.status = ''
  filterForm.dateRange = []
  handleFilter()
}

// 处理标签页切换
const handleTabClick = (tab) => {
  // TODO: 根据标签加载不同状态的订单
  console.log('切换到：', tab.props.name)
}

// 查看订单详情
const handleDetail = (order) => {
  currentOrder.value = order
  dialogVisible.value = true
}

// 完成服务
const handleComplete = async (order) => {
  try {
    await ElMessageBox.confirm(
      '确认已完成该订单的服务？',
      '完成确认',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'success'
      }
    )
    
    // TODO: 调用完成服务API
    ElMessage.success('服务已完成')
    order.status = 'completed'
  } catch {}
}

// 取消订单
const handleCancel = async (order) => {
  try {
    await ElMessageBox.confirm(
      '确认取消该订单？取消后将无法恢复',
      '取消确认',
      {
        confirmButtonText: '确认取消',
        cancelButtonText: '返回',
        type: 'warning'
      }
    )
    
    // TODO: 调用取消订单API
    ElMessage.success('订单已取消')
    order.status = 'cancelled'
  } catch {}
}

// 分页相关方法
const handleSizeChange = (val) => {
  pageSize.value = val
  // TODO: 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // TODO: 重新加载数据
}

// 页面加载时获取数据
onMounted(() => {
  // TODO: 获取订单列表数据
})
</script>

<style scoped lang="scss">
.order-list-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;

  .header {
    margin-bottom: 20px;

    h2 {
      margin: 0 0 20px;
    }
  }

  .filter-form {
    margin-bottom: 20px;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}

.order-detail {
  .detail-section {
    margin-bottom: 24px;

    h3 {
      margin: 0 0 16px;
      padding-bottom: 8px;
      border-bottom: 1px solid #ebeef5;
      color: #303133;
    }

    .detail-row {
      display: flex;
      margin-bottom: 12px;

      .label {
        width: 100px;
        color: #909399;
      }

      .price {
        color: #f56c6c;
        font-weight: bold;
      }
    }

    p {
      margin: 0;
      color: #606266;
      line-height: 1.6;
    }
  }
}
</style> 